<template>
	<div>
		<h2>服务连接状态: {{ connectionStatus ? '已连接' : '未连接' }}</h2>
		<button @click="checkConnection">检查连接状态</button>
		<h2>摄像头列表</h2>
		<button @click="fetchCameraList">获取摄像头列表</button>
		<ul>
			<li v-for="camera in cameraList" :key="camera.serialNumber">
				IP地址: {{ camera.ipAddress }}, 序列号: {{ camera.serialNumber }}
			</li>
		</ul>
		<h2>实时推流</h2>
		<div class="horizontal-layout">
			<div class="input-container">
				<span class="suffix">IPC编号</span>
				<input type="text" v-model="pushIpcSn" placeholder="请输入摄像头编号" />

			</div>

			<div class="input-container">
				<span class="suffix">推流地址</span>
				<input type="text" v-model="pushUrl" placeholder="请输入推流地址,如:rtmp://192.168.1.1:1935/live/test" />

			</div>
			<button @click="startPush">开始推流</button>
		</div>
		<h2>停止推流</h2>
		<div class="horizontal-layout">
			<div class="input-container">
				<span class="suffix">IPC编号</span>
				<input type="text" v-model="stopIpcSn" placeholder="请输入摄像头编号" />
			</div>


			<button @click="stopPush">停止推流</button>
		</div>
		
		<h2>获取指定区间历史视频文件</h2>
		<div class="horizontal-layout">
			
			<div class="input-container">
				<span class="suffix">开始时间</span>
				<input type="text" style="width: 200px;" v-model="startTime" placeholder="例如:2024-12-20 10:16:45" />
			</div>

			<div class="input-container">
				<span class="suffix">结束时间</span>
				<input type="text" style="width: 200px;" v-model="endTime" placeholder="例如:2024-12-20 10:17:15" />
			</div>

			<div class="input-container">
				<span class="suffix">IPC编号</span>
				<input type="text" style="width: 200px;" v-model="historyIpcSn" placeholder="请输入摄像头编号" />
			</div>

			<button @click="getHistory">获取历史视频</button>
		</div>
	</div>
</template>

<script>
	// 导入要使用的插件
	import {
		bindService,
		requestHistoryVideo,
		requestStreaming,
		requestGetCameraList,
		requestStopStreaming
	} from "../../uni_modules/wif-monitor";
	export default {
		data() {
			return {
				connectionStatus: false, // 初始连接状态为false
				cameraList: [], // 存储摄像头列表
				pushIpcSn: '',
				pushUrl: '',
				stopIpcSn: '',
				startTime: '',
				endTime: '',
				historyIpcSn: ''

			}
		},
		onLoad() {
			bindService({
				result: (bind) => {
					console.log("bindService response bind:" + bind)
					this.connectionStatus = bind

					// requestHistoryVideo({
					// 	arg1: '2024-12-20 10:16:45',
					// 	arg2: '2024-12-20 10:17:15',
					// 	arg3: 'DS-2CD1345V2-LA20240913AACHFN7280304',
					// 	response: (res) => {
					// 		console.log("requestHistoryVideo response res = " + res)
					// 	}
					// })
				}
			});


		},
		methods: {
			//获取摄像头列表
			fetchCameraList() {
				requestGetCameraList({
					response: (res) => {
						// 解析摄像头列表
						try {
							console.log("解析摄像头列表 res:" + res)
							const resJson = JSON.parse(res);
							this.cameraList = JSON.parse(resJson.msg);
						} catch (e) {
							console.error("解析摄像头列表失败:", e);
							this.cameraList = [];
						}
					}
				})
			},

			//推流
			startPush() {
				requestStreaming({
					arg1: this.pushIpcSn,
					arg2: this.pushUrl,
					response: (res) => {
						console.log("requestStreaming res:" + res)
					}
				})
			},

			//停止推流
			stopPush() {
				requestStopStreaming({
					arg1: this.stopIpcSn,
					response: (res) => {
						console.log("requestStopStreaming res:" + res)
					}
				})
			},

			//获取历史视频文件
			getHistory() {
				requestHistoryVideo({
					arg1: this.startTime,
					arg2: this.endTime,
					arg3: this.historyIpcSn,
					response: (res) => {
						console.log("requestHistoryVideo res:" + res)
					}
				})
			}

		}
	}
</script>

<style>
	/* 可以根据需要添加样式 */
	h1,
	h2 {
		padding-left: 10px;
		margin-bottom: 10px;
	}


	.horizontal-layout {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.input-container {
		display: flex;
		align-items: center;
		border: 1px solid #ccc;
		border-radius: 4px;
		overflow: hidden;
		margin-right: 10px;
		/* 增加与按钮的间距 */
	}

	input {
		width: 400px;
		/* 输入框宽度 */
		padding: 5px 10px;
		border: none;
		outline: none;
	}

	.suffix {
		padding: 5px 10px;
		background-color: #e9ecef;
		border-left: 1px solid #ccc;
		color: #333;
	}

	.date-time-picker {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
	}

	.picker {
		display: flex;
		flex-direction: column;
		margin-right: 20px;
	}

	label {
		margin-bottom: 5px;
	}

	input[type="datetime-local"] {
		padding: 5px;
		font-size: 14px;
	}
</style>